<div>
  <ul class="nav nav-tabs" v-if="showHeader">
    <li
      v-if="displayNames"
      v-for="(item, index) in displayNames"
      :key="index"
      :class="index === d_active && 'active'"
      @click="changeIndex($event,index)"
    >
      <a href="javascript:;">{{item}}</a>
    </li>
    <li
      v-if="!displayNames && item.$scopedSlots.header()"
      v-for="(item, index) in containers"
      :key="index"
      :class="index === d_active && 'active'"
      @click="changeIndex($event,index)"
    >
      <kb-container
        tag="a"
        href="javascript:;"
        :v-nodes="item.$scopedSlots.header()"
      ></kb-container>
    </li>
  </ul>
  <div class="tab-content">
    <kb-container
      v-for="(item, index) in containers"
      :key="index"
      tag="section"
      :class="index === d_active?'tab-pane fade active in':'tab-pane fade'"
      :v-nodes="item.$scopedSlots.content()"
    ></kb-container>
  </div>
  <slot></slot>
</div>
